<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部网站嵌入Props Management示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f0f0f0;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .section h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .code-example {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            margin: 10px 0;
            overflow-x: auto;
        }
        .demo-container {
            border: 2px solid #3498db;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
        }
        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background: #2980b9;
        }
        .params {
            margin: 10px 0;
        }
        .params input {
            margin: 5px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 外部网站嵌入Props Management示例</h1>
        <p>本页面演示如何在任意外部网站中嵌入Props Management界面</p>

        <div class="section">
            <h2>方法一：直接使用iframe HTML接口</h2>
            <p>这是最简单的方法，直接获取可嵌入的iframe代码：</p>
            
            <div class="code-example">
<!-- 示例：获取iframe HTML代码 -->
&lt;script&gt;
// 直接获取iframe HTML代码
fetch('http://localhost:8080/api/demo/props-management/embed?width=100%&height=600px&title=My+Props')
    .then(response => response.text())
    .then(html => {
        document.getElementById('props-container').innerHTML = html;
    })
    .catch(error => {
        console.error('加载失败:', error);
        document.getElementById('props-container').innerHTML = 
            '&lt;div style="color: red;">Props Management 加载失败&lt;/div>';
    });
&lt;/script&gt;

&lt;div id="props-container">&lt;/div&gt;
            </div>

            <div class="params">
                服务器地址: <input type="text" id="server1" value="http://localhost:8080" placeholder="http://your-server.com:8080">
                管理路径: <input type="text" id="path1" value="/demo/props-management" placeholder="/demo111/props-management">
                宽度: <input type="text" id="width1" value="100%" placeholder="100%">
                高度: <input type="text" id="height1" value="600px" placeholder="600px">
                <button class="btn" onclick="loadMethod1()">加载示例</button>
            </div>

            <div class="demo-container" id="demo1">
                <p>点击"加载示例"按钮查看效果</p>
            </div>
        </div>

        <div class="section">
            <h2>方法二：使用JSON接口（推荐）</h2>
            <p>这种方法提供更多信息和更好的错误处理：</p>
            
            <div class="code-example">
<!-- 示例：使用JSON接口 -->
&lt;script&gt;
fetch('http://localhost:8080/api/demo/props-management/embed-json?width=800px&height=500px')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 插入iframe
            document.getElementById('props-container').innerHTML = data.iframeHtml;
            
            // 可以获取更多信息
            console.log('Props Management URL:', data.iframeUrl);
            console.log('管理路径:', data.managementPath);
            console.log('基础URL:', data.baseUrl);
        } else {
            throw new Error(data.message || '加载失败');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('props-container').innerHTML = 
            '&lt;div style="color: red;">Props Management 加载失败: ' + error.message + '&lt;/div>';
    });
&lt;/script&gt;
            </div>

            <div class="params">
                服务器地址: <input type="text" id="server2" value="http://localhost:8080" placeholder="http://your-server.com:8080">
                管理路径: <input type="text" id="path2" value="/demo/props-management" placeholder="/demo111/props-management">
                宽度: <input type="text" id="width2" value="800px" placeholder="800px">
                高度: <input type="text" id="height2" value="500px" placeholder="500px">
                <button class="btn" onclick="loadMethod2()">加载示例</button>
            </div>

            <div class="demo-container" id="demo2">
                <p>点击"加载示例"按钮查看效果</p>
            </div>
        </div>

        <div class="section">
            <h2>方法三：跨域调用（从其他域名访问）</h2>
            <p>Props Management支持CORS，可以从任意域名调用：</p>
            
            <div class="code-example">
<!-- 示例：跨域调用 -->
&lt;script&gt;
// 从外部网站调用其他服务器的Props Management
fetch('http://your-props-server.com:8080/api/demo111/props-management/embed-json', {
    mode: 'cors',  // 明确指定跨域模式
    headers: {
        'Accept': 'application/json'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    return response.json();
})
.then(data => {
    if (data.success) {
        document.getElementById('external-props').innerHTML = data.iframeHtml;
    } else {
        throw new Error(data.message);
    }
})
.catch(error => {
    console.error('跨域调用失败:', error);
    document.getElementById('external-props').innerHTML = 
        '&lt;div style="color: red;">跨域调用失败: ' + error.message + '&lt;/div>';
});
&lt;/script&gt;

&lt;div id="external-props">&lt;/div&gt;
            </div>

            <div class="params">
                外部服务器: <input type="text" id="external-server" value="http://your-props-server.com:8080" placeholder="http://your-props-server.com:8080">
                管理路径: <input type="text" id="external-path" value="/demo111/props-management" placeholder="/custom/props-management">
                <button class="btn" onclick="loadExternal()">测试跨域调用</button>
            </div>

            <div class="demo-container" id="demo3">
                <p>修改上面的服务器地址，然后点击"测试跨域调用"</p>
            </div>
        </div>

        <div class="section">
            <h2>URL模式说明</h2>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa;">
                        <th style="border: 1px solid #ddd; padding: 10px;">接口类型</th>
                        <th style="border: 1px solid #ddd; padding: 10px;">URL模式</th>
                        <th style="border: 1px solid #ddd; padding: 10px;">返回类型</th>
                        <th style="border: 1px solid #ddd; padding: 10px;">适用场景</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 10px;">HTML接口</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">/api{管理路径}/embed</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">text/html</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">直接嵌入，简单快速</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 10px;">JSON接口</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">/api{管理路径}/embed-json</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">application/json</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">需要更多信息和错误处理</td>
                    </tr>
                </tbody>
            </table>

            <h3>URL示例：</h3>
            <ul>
                <li><code>http://localhost:8080/api/demo/props-management/embed</code></li>
                <li><code>http://localhost:8080/api/demo111/props-management/embed-json</code></li>
                <li><code>http://your-server.com:8080/api/custom-path/props-management/embed</code></li>
            </ul>
        </div>

        <div class="section">
            <h2>参数说明</h2>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa;">
                        <th style="border: 1px solid #ddd; padding: 10px;">参数名</th>
                        <th style="border: 1px solid #ddd; padding: 10px;">默认值</th>
                        <th style="border: 1px solid #ddd; padding: 10px;">说明</th>
                        <th style="border: 1px solid #ddd; padding: 10px;">示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 10px;">width</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">100%</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">iframe宽度</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">800px, 100%, 50vw</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 10px;">height</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">600px</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">iframe高度</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">500px, 80vh</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 10px;">border</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">1</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">边框宽度（0为无边框）</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">0, 1, 2</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 10px;">title</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">Props Management</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">iframe标题</td>
                        <td style="border: 1px solid #ddd; padding: 10px;">配置管理, My Props</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        function loadMethod1() {
            const server = document.getElementById('server1').value;
            const path = document.getElementById('path1').value;
            const width = document.getElementById('width1').value;
            const height = document.getElementById('height1').value;
            
            const url = `${server}/api${path}/embed?width=${encodeURIComponent(width)}&height=${encodeURIComponent(height)}&title=Method1+Example`;
            
            fetch(url)
                .then(response => response.text())
                .then(html => {
                    document.getElementById('demo1').innerHTML = html;
                })
                .catch(error => {
                    document.getElementById('demo1').innerHTML = 
                        `<div style="color: red;">加载失败: ${error.message}<br>URL: ${url}</div>`;
                });
        }

        function loadMethod2() {
            const server = document.getElementById('server2').value;
            const path = document.getElementById('path2').value;
            const width = document.getElementById('width2').value;
            const height = document.getElementById('height2').value;
            
            const url = `${server}/api${path}/embed-json?width=${encodeURIComponent(width)}&height=${encodeURIComponent(height)}&title=Method2+Example`;
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('demo2').innerHTML = data.iframeHtml;
                        console.log('Props Management 信息:', data);
                    } else {
                        throw new Error(data.message || '加载失败');
                    }
                })
                .catch(error => {
                    document.getElementById('demo2').innerHTML = 
                        `<div style="color: red;">加载失败: ${error.message}<br>URL: ${url}</div>`;
                });
        }

        function loadExternal() {
            const server = document.getElementById('external-server').value;
            const path = document.getElementById('external-path').value;
            
            const url = `${server}/api${path}/embed-json?width=100%&height=500px&title=External+Example`;
            
            fetch(url, {
                mode: 'cors'
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        document.getElementById('demo3').innerHTML = data.iframeHtml;
                    } else {
                        throw new Error(data.message);
                    }
                })
                .catch(error => {
                    document.getElementById('demo3').innerHTML = 
                        `<div style="color: red;">跨域调用失败: ${error.message}<br>URL: ${url}<br>请确保目标服务器支持CORS且正在运行</div>`;
                });
        }
    </script>
</body>
</html> 